<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>API请求捕获测试页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h2 {
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            margin: 10px 0;
        }
        .log {
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <h1>API请求捕获测试页</h1>
    <p>这个页面用于测试Chrome扩展对API请求的捕获功能。</p>
    
    <div class="container">
        <div class="card">
            <h2>XMLHttpRequest测试</h2>
            <button onclick="sendXHRRequest()">发送XHR POST请求</button>
            <button onclick="sendXHRRequestWithJSON()">发送XHR JSON请求</button>
            <button onclick="sendXHRRequestWithFormData()">发送XHR FormData请求</button>
            <div class="log">
                <pre id="xhr-log">等待操作...</pre>
            </div>
        </div>

        <div class="card">
            <h2>Fetch API测试</h2>
            <button onclick="sendFetchRequest()">发送Fetch POST请求</button>
            <button onclick="sendFetchRequestWithJSON()">发送Fetch JSON请求</button>
            <button onclick="sendFetchRequestWithFormData()">发送Fetch FormData请求</button>
            <div class="log">
                <pre id="fetch-log">等待操作...</pre>
            </div>
        </div>
    </div>

    <script>
        // 记录日志函数
        function logToXHR(message) {
            const log = document.getElementById('xhr-log');
            log.textContent = new Date().toLocaleTimeString() + ': ' + message + '\n' + log.textContent;
        }

        function logToFetch(message) {
            const log = document.getElementById('fetch-log');
            log.textContent = new Date().toLocaleTimeString() + ': ' + message + '\n' + log.textContent;
        }

        // XHR测试
        function sendXHRRequest() {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://httpbin.org/post', true);
            xhr.setRequestHeader('Content-Type', 'text/plain');
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        logToXHR('请求成功: ' + xhr.responseText.substring(0, 100) + '...');
                    } else {
                        logToXHR('请求失败: ' + xhr.status);
                    }
                }
            };
            
            const data = 'Hello, this is a simple POST test!';
            xhr.send(data);
            logToXHR('发送普通文本POST请求: ' + data);
        }

        function sendXHRRequestWithJSON() {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://httpbin.org/post', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        logToXHR('JSON请求成功: ' + xhr.responseText.substring(0, 100) + '...');
                    } else {
                        logToXHR('JSON请求失败: ' + xhr.status);
                    }
                }
            };
            
            const data = {
                name: '测试用户',
                id: 12345,
                items: ['项目1', '项目2', '项目3'],
                timestamp: new Date().toISOString()
            };
            
            xhr.send(JSON.stringify(data));
            logToXHR('发送JSON请求: ' + JSON.stringify(data));
        }

        function sendXHRRequestWithFormData() {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://httpbin.org/post', true);
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        logToXHR('FormData请求成功: ' + xhr.responseText.substring(0, 100) + '...');
                    } else {
                        logToXHR('FormData请求失败: ' + xhr.status);
                    }
                }
            };
            
            const formData = new FormData();
            formData.append('name', '测试用户');
            formData.append('id', '12345');
            formData.append('file', new Blob(['测试文件内容'], { type: 'text/plain' }), 'test.txt');
            
            xhr.send(formData);
            logToXHR('发送FormData请求 (包含文件)');
        }

        // Fetch测试
        async function sendFetchRequest() {
            try {
                logToFetch('发送普通文本POST请求...');
                const response = await fetch('https://httpbin.org/post', {
                    method: 'POST',
                    body: 'Hello, this is a Fetch API test!',
                    headers: {
                        'Content-Type': 'text/plain'
                    }
                });
                
                const data = await response.json();
                logToFetch('请求成功: ' + JSON.stringify(data).substring(0, 100) + '...');
            } catch (error) {
                logToFetch('请求错误: ' + error.message);
            }
        }

        async function sendFetchRequestWithJSON() {
            try {
                const data = {
                    name: '测试用户',
                    id: 56789,
                    items: ['项目A', '项目B', '项目C'],
                    timestamp: new Date().toISOString()
                };
                
                logToFetch('发送JSON请求: ' + JSON.stringify(data));
                
                const response = await fetch('https://httpbin.org/post', {
                    method: 'POST',
                    body: JSON.stringify(data),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                const responseData = await response.json();
                logToFetch('请求成功: ' + JSON.stringify(responseData).substring(0, 100) + '...');
            } catch (error) {
                logToFetch('请求错误: ' + error.message);
            }
        }

        async function sendFetchRequestWithFormData() {
            try {
                const formData = new FormData();
                formData.append('name', '测试用户');
                formData.append('id', '56789');
                formData.append('file', new Blob(['Fetch测试文件内容'], { type: 'text/plain' }), 'fetch-test.txt');
                
                logToFetch('发送FormData请求 (包含文件)');
                
                const response = await fetch('https://httpbin.org/post', {
                    method: 'POST',
                    body: formData
                });
                
                const responseData = await response.json();
                logToFetch('请求成功: ' + JSON.stringify(responseData).substring(0, 100) + '...');
            } catch (error) {
                logToFetch('请求错误: ' + error.message);
            }
        }
    </script>
</body>
</html> 